<template>
  <div class="ranking-list-container">
    <el-scrollbar>
      <table class="ranking-table">
        <thead>
        <tr>
          <th style="background-color: #f0f8ff;">单位</th>
          <th style="background-color: #f0f8ff;">预算产值（万元）</th>
          <th style="background-color: #f0f8ff;">研发投入预算（万元）</th>
          <th style="background-color: #f0f8ff;">截止当前归集发生额（万元）</th>
          <th style="background-color: #f0f8ff;">投入差额（万元）</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in rankingList" :key="index">
          <td>{{ item.unit }}</td>
          <td>{{ item.budgetValue }}</td>
          <td>{{ item.researchBudget }}</td>
          <td>{{ item.currentCollection }}</td>
          <td>{{ item.investmentDifference }}</td>
        </tr>
        </tbody>
      </table>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "RankingList",
  data() {
    return {
      rankingList: [
        { unit: "第一工程公司", budgetValue: 299327.52, researchBudget: 10476, currentCollection: "123213", investmentDifference: "123123" },
        { unit: "第二工程公司", budgetValue: 354421.63, researchBudget: 12406.24, currentCollection: "", investmentDifference: "" },
        { unit: "第三工程公司", budgetValue: 402802.08, researchBudget: 15105.78, currentCollection: "", investmentDifference: "" },
        { unit: "第四工程公司", budgetValue: 202594.79, researchBudget: 7090.82, currentCollection: "", investmentDifference: "" },
        { unit: "第五工程公司", budgetValue: "", researchBudget: "", currentCollection: "", investmentDifference: "" },
        { unit: "机电制造安装公司", budgetValue: 176229.79, researchBudget: 6168.04, currentCollection: "", investmentDifference: "" },
        { unit: "国际公司", budgetValue: 133515.51, researchBudget: 4678.38, currentCollection: "", investmentDifference: "" },
        { unit: "国际公司", budgetValue: 133515.51, researchBudget: 4678.38, currentCollection: "", investmentDifference: "" },
        { unit: "国际公司", budgetValue: 133515.51, researchBudget: 4678.38, currentCollection: "", investmentDifference: "" },
        { unit: "国际公司", budgetValue: 133515.51, researchBudget: 4678.38, currentCollection: "", investmentDifference: "" },
        { unit: "国际公司", budgetValue: 133515.51, researchBudget: 4678.38, currentCollection: "", investmentDifference: "" },
        { unit: "国际公司", budgetValue: 133515.51, researchBudget: 4678.38, currentCollection: "", investmentDifference: "" },
        { unit: "国际公司", budgetValue: 133515.51, researchBudget: 4678.38, currentCollection: "", investmentDifference: "" },
        { unit: "国际公司", budgetValue: 133515.51, researchBudget: 4678.38, currentCollection: "", investmentDifference: "" },
        { unit: "实业总公司", budgetValue: 39531.49, researchBudget: 1348.3, currentCollection: "", investmentDifference: "" },
        { unit: "科研设计咨询公司", budgetValue: 30000, researchBudget: 1050.03, currentCollection: "", investmentDifference: "" }
      ],
    };
  },
};
</script>

<style scoped>
.ranking-list-container {
  height: 350px;
  overflow-y: auto;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 使用固定布局 */
}

.ranking-table th,
.ranking-table td {
  padding: 8px;
  text-align: center; /* 将文本居中对齐 */
  border-bottom: 1px solid #ebebeb;
  overflow: hidden; /* 防止内容溢出 */
  white-space: nowrap; /* 禁止自动换行 */
}

/* 设置列宽 */
.ranking-table th:first-child,
.ranking-table td:first-child {
  width: 25%; /* 假设年份占总宽度的25% */
}
.ranking-table th:not(:first-child),
.ranking-table td:not(:first-child) {
  width: 25%; /* 其他列也各自占25%，可以根据实际情况调整 */
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 3px; /* 滚动条宽度 */
  background-color: transparent;
}

::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #dddddd; /* 轨道颜色 */
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #5bc0de; /* 滑块颜色 */
  transition: background-color 0.3s ease-in-out;
}

/* 响应式设计 */
@media screen and (min-width: 2801px) and (max-width: 2900px) {
  .ranking-list-container {
    height: 590px;
  }
}
@media screen and (min-width: 2701px) and (max-width: 2800px) {
  .ranking-list-container {
    height: 575px;
  }
}
</style>
